<template>
    <l-dialog
        title="数据表选择"

        width="800px"
        :height="600"

        :visible.sync="midVisible"
        :hasBtns="multiple"
        @close="closeDialog"
        @opened="handleOpened"
        @ok="okDialog"
        >
        <l-select-panel
                style="padding:8px;"
                ref="selectPanel"
                v-model="value"

                :isRefresh="true"
                :selectedData.sync="selectedData"
                :columns="columns"
                :isPage="true"
                :loadSelectTable="loadSelectTable"
                :refreshData="refreshData"
                :multiple="multiple"
                model="client"
                valueKey="name"

                @rowClick="handleRowClick"
            >
        </l-select-panel>
    </l-dialog>
</template>

<script>
const api = window.$api.data.dbTable
export default {
    name:'l-dbtable-selectdialog',
    props: {
        visible:{
            type:Boolean,
        },
        dbCode:String,
        multiple:{
            type:Boolean,
            default:true
        },
        isOkClose:{
            type:Boolean,
            default:true
        }
    },
    data () {
        return {
            value:'',
            selectedData:[],
            columns:[
                {label:'表名',prop:'name',minWidth:'120'},
                {label:'说明',prop:'description',minWidth:'120'},
                //{label:'类型',prop:'type',width:'100',align:'center'}
            ],
            dbList:null
        };
    },
    created () {
    },
    mounted () {
    },
    computed:{
        midVisible:{
            get(){
                return this.visible;
            },
            set(val){
                this.$emit('update:visible',val);
            }
        }
    },
    methods:{
        refreshData(){
            this.dbList = null;
            this.$refs.selectPanel.init()
        },
        loadSelectTable(postData){
            return new Promise((resolve) => {
                if(this.dbList == null){
                    if(this.dbCode){
                        api.getList(this.dbCode).then(res => {
                            this.dbList = this.$deepClone(res.data.data || [])
                            let res2 = this.$pagination(postData.page,postData.rows,this.dbList)
                            resolve({rows:res2,records:this.dbList.length})
                        }).catch(()=>{
                            this.dbList = [];
                            resolve({rows:[],records:0})
                        });
                    }
                }
                else{
                    let list = this.dbList;
                    if(!this.$validatenull(postData.keyword)){
                        list = list.filter(t=>t.name.indexOf(postData.keyword) != -1 || t.description.indexOf(postData.keyword) != -1)
                    }

                    let res3 = this.$pagination(postData.page,postData.rows,list);
                    resolve({rows:res3,records:list.length});
                }
            })
        },
        closeDialog() {
            this.$refs.selectPanel.handleClear();
        },
        handleOpened(){
            this.$refs.selectPanel.init();
        },
        loadData(){
            this.$refs.selectPanel.init();
        },
        okDialog(showLoading, hideLoading){
            this.$emit('select',this.selectedData,showLoading, hideLoading)
            if(this.isOkClose){
                this.midVisible =false
            }
        },
        handleRowClick(){
            if(!this.multiple){
                this.$emit('select',this.selectedData)
                if(this.isOkClose){
                    this.midVisible =false
                }
            }
        }
    }
}
</script>